<template>
  <div>
    <el-dialog
      title="功能授权"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="30%"
      :destroy-on-close="true"
    >
      <el-tree
        :data="alldata"
        show-checkbox
        node-key="id"
        :default-expand-all="false"
        :default-checked-keys="ckArray"
        :props="defaultProps"
        @check-change="handleCheckChange"
        ref="tree"
      ></el-tree>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button size="small" @click="visible = false">取消</el-button> -->
        <el-button size="small" type="primary" @click="Submit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleAuthority,
  getAllAuthority,
  updataRole,
} from '../../api/src/system/role'
export default {
  name: 'roleAuthority',
  data() {
    return {
      visible: false,

      roleId: '',
      roleName: '',
      roleRemark: '',
      alldata: [],
      ckArray: [],
      defaultProps: {
        children: 'childrenList',
        label: 'permissionName',
      },
      authList: [],
      myRoleAuth: [],
    }
  },
  methods: {
    async init(row) {
      this.alldata = []
      this.ckArray = []
      this.roleId = ''
      this.roleName = row.name
      this.roleRemark = row.remark
      // console.log('用户de1：：：：========>', row)

      var obj = JSON.parse(row.authData)
      // console.log('用户权限：：：：========>', obj)
      this.authList = obj.authList

      // console.log('用户权限：：：：========>', this.authList);
      this.roleId = row.id

      await getAllAuthority().then(res => {
        // console.log('查询全部权限成功::::::::>>>>', res)
        this.alldata = res
        // this.ckArray = this.authList;
      })

      await getRoleAuthority(row.id).then(res => {
        console.log('用户权限：：：：========>', res)
        console.dir(res)
        this.ckArray = []
        if (res !== null) {
          this.def(res)
        }
        console.log('-------------------')
        console.dir(this.myRoleAuth)
      })
      this.visible = true
    },
    def(roleAuth) {
      for (var i = 0; i < roleAuth.length; i++) {
        if (roleAuth[i].childrenList !== null) {
          this.def(roleAuth[i].childrenList)
        } else {
          this.ckArray.push(roleAuth[i].id)
        }
      }
    },
    // 表单提交
    async Submit() {
      await updataRole(
        this.authList,
        this.roleId,
        this.roleName,
        this.roleRemark
      ).then(res => {
        console.log('修改成功::::::::>>>>', res)
      })
      setTimeout(this.$emit('getDataList'), 800)

      this.visible = false
    },

    handleCheckChange(data, checked, nodeChecked) {
      this.authList = []
      const selectValues = this.$refs.tree.getCheckedNodes(false, true)
      // 获取用户选择的所有权限
      selectValues.forEach(item => {
        this.authList.push(item.value)
      })

      console.log('用户选择的权限', this.authList)
    },
    handleNodeClick(data) {
      console.log('点击数据2', data)
    },
  },
}
</script>

<style></style>
